<template>
  <div class="company-box">
    <div class="search">
      <el-form :inline="true" label-width="100px" :model="searchForm">
        <el-form-item label="用户ID:">
          <el-input
            v-model="searchForm.companyUser"
            placeholder="请输入用户id "
            popper-class="my-autocomplete"
            style="width: 280px"
            @change="searchBy"
          >
            <i class="el-icon-search el-input__icon" style="font-size: 16px; cursor: pointer" @click="searchBy" slot="suffix"></i>
          </el-input>
        </el-form-item>
        <el-form-item label="审核状态:">
          <el-select v-model="searchForm.companyStatus" clearable placeholder="请选择" style="width: 150px" @change="searchBy">
            <el-option v-for="(item, index) in statusList" :key="index" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="审核人员:">
          <el-input v-model="searchForm.auditUser" placeholder="输入员工号 " popper-class="my-autocomplete" @change="searchBy">
            <i class="el-icon-search el-input__icon" style="font-size: 16px; cursor: pointer" @click="searchBy" slot="suffix"></i>
          </el-input>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-button :disabled="multipleSelection.length === 0" type="success" @click="batchAuditSuccess">批量审核通过</el-button>
      <el-button :disabled="multipleSelection.length === 0" type="danger" @click="batchAuditErrorShow">批量审核失败</el-button>
    </div>
    <el-divider />
    <div class="data">
      <el-table
        ref="multipleTable"
        :data="tableData"
        stripe
        style="width: 100%"
        tooltip-effect="dark"
        @selection-change="handleSelectionChange"
      >
        <el-table-column align="center" type="selection" width="55" />
        <el-table-column align="center" label="公司名称" prop="companyName" width="120" />
        <el-table-column align="center" label="开户行账号" prop="bankAccount" width="180" />
        <el-table-column align="center" label="开户行类型" prop="bankStyle" width="200" />
        <el-table-column align="center" label="用户信息" width="120">
          <template slot-scope="scope">
            <el-button size="medium " type="text" @click="viewUserInfo(scope.row.userId)">查看用户信息</el-button>
          </template>
        </el-table-column>
        <el-table-column align="center" label="审核状态" width="120">
          <template slot-scope="scope">
            <el-tooltip v-if="scope.row.status === 0" class="item" content="请进行审核" effect="dark" placement="top">
              <span style="color: #409eff">待审核</span>
            </el-tooltip>
            <el-tooltip v-if="scope.row.status === 1" class="item" content="点击查看详情" effect="dark" placement="top">
              <span style="color: #f56c6c; cursor: pointer">审核未通过</span>
            </el-tooltip>
            <el-tooltip v-if="scope.row.status === 2" class="item" content="点击查看详情" effect="dark" placement="top">
              <span style="color: #67c23a; cursor: pointer">审核通过</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column align="center" label="提交审核时间" prop="auditTime" sortable width="160" />
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <div v-if="scope.row.status === 0">
              <el-link type="success" @click="auditSuccess(scope.row)">审核成功</el-link>
              <el-link style="margin-left: 20px" type="danger" @click="auditErrorShow(scope.row)">审核失败</el-link>
            </div>
            <div v-else-if="scope.row.status === 1">
              <el-result icon="error" style="font-size: 12px" sub-title="点击审核状态查看详情" title="审核失败" />
            </div>
            <div v-else-if="scope.row.status === 2">
              <el-result icon="success" :icon-class-name="'my-custom-icon'" sub-title="点击审核状态查看详情" title="审核成功" />
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <el-pagination
        :current-page="currentPage"
        layout="total, sizes, prev, pager, next, jumper"
        :page-size="pageSize"
        :page-sizes="[5, 10, 15, 20]"
        :total="total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </div>
    <!-- 用户信息弹出层 -->
    <el-dialog title="用户信息" :visible.sync="userInfoVisible">
      <div style="font-size: 20px; margin-left: 200px">
        <div style="margin-top: 20px">
          <b>用户名：</b>
          {{ userInfo.username }}
        </div>
        <div style="margin-top: 20px">
          <b>是否被企业认证：</b>
          {{ userInfo.companyId !== null ? '是' : '否' }}
        </div>
        <div v-if="userInfo.companyId !== null" style="margin-top: 20px">
          <b>公司名称：</b>
          {{ userInfo.companyName }}
        </div>
        <div v-if="userInfo.companyId !== null" style="margin-top: 20px">
          <b>所在公司职位：</b>
          {{ userInfo.duties }}
        </div>
        <div style="margin-top: 20px">
          <b>用户创建时间：</b>
          {{ userInfo.createTime }}
        </div>
      </div>
    </el-dialog>
    <!-- 审核失败填写理由 -->
    <el-dialog title="审核失败" :visible.sync="auditErrorVisible">
      <el-input v-model="errorMessage" placeholder="请输入审核失败原因" :rows="10" type="textarea" />
      <div slot="footer" class="dialog-footer">
        <el-button @click="auditErrorVisible = false">取 消</el-button>
        <el-button type="primary" @click="auditError">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import http_audit_company from '@/api/audit/company.js'
  export default {
    name: 'Company',
    data() {
      return {
        // 搜索行内表单数据
        searchForm: {
          companyUser: '',
          companyStatus: '',
          auditUser: '',
        },
        // 审核状态遍历数据
        statusList: [
          {
            label: '待审核',
            value: 0,
          },
          {
            label: '审核未通过',
            value: 1,
          },
          {
            label: '审核成功',
            value: 2,
          },
        ],
        // 多选数据
        multipleSelection: [],
        // 表格数据
        tableData: [],
        // 分页信息
        currentPage: 0,
        total: 1,
        pageSize: 5,
        // 用户信息数据
        userInfoVisible: false,
        userInfo: {},
        // 审核失败对话框
        auditErrorVisible: false,
        data: {},
        errorMessage: '',
      }
    },
    mounted() {
      if (this.$route.params.auditCompanyId === undefined) {
        this.getTableData()
      } else {
        this.getCompanyById(this.$route.params.auditCompanyId)
      }
    },
    methods: {
      // 根据id获得单个数据
      async getCompanyById(auditCompanyId) {
        const result = await http_audit_company.getCompanyById(auditCompanyId)
        if (result.code === 200) {
          this.tableData.push(result.data)
        }
      },
      // 获得表格数据
      async getTableData() {
        const result = await http_audit_company.getCompanyAuditList(this.currentPage, this.pageSize, this.searchForm)
        if (result.code === 200) {
          this.total = result.data.total
          this.tableData = result.data.records
        }
      },
      // 表格勾选状态改变
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      // 改变每页个数
      handleSizeChange(val) {
        this.pageSize = val
        this.getTableData()
      },
      // 当前页码改变
      handleCurrentChange(val) {
        this.currentPage = val
        this.getTableData()
      },
      // 查看用户信息
      async viewUserInfo(userId) {
        const result = await http_audit_company.getUserInfo(userId)
        if (result.code === 200) {
          this.userInfoVisible = true
          this.userInfo = result.data
        }
      },
      // 从本地存储获得用户信息
      getUserInfoToLocal() {
        const userInfo = JSON.parse(localStorage.getItem('userInfo'))
        return userInfo
      },
      // 审核成功
      async auditSuccess(data) {
        const userInfo = this.getUserInfoToLocal()
        const result = await http_audit_company.auditSuccess(data.auditCompanyId, userInfo.userNumber)
        if (result.code === 200) {
          this.$message({
            message: '操作成功',
            type: 'success',
          })
          this.getTableData()
        }
      },
      // 审核失败显示
      auditErrorShow(data) {
        this.auditErrorVisible = true
        this.data = data
        this.errorMessage = ''
      },
      // 审核失败
      async auditError() {
        const userInfo = this.getUserInfoToLocal()
        if (Array.isArray(this.data)) {
          for (let i = 0; i < this.multipleSelection.length; i++) {
            const result = await http_audit_company.auditError(
              this.multipleSelection[i].auditCompanyId,
              userInfo.userNumber,
              this.errorMessage
            )
            if (result.code === 200) {
              this.$message({
                message: '操作成功',
                type: 'success',
              })
              this.getTableData()
              this.auditErrorVisible = false
            }
          }
        } else {
          const result = await http_audit_company.auditError(this.data.auditCompanyId, userInfo.userNumber, this.errorMessage)
          if (result.code === 200) {
            this.$message({
              message: '操作成功',
              type: 'success',
            })
            this.getTableData()
            this.auditErrorVisible = false
          }
        }
      },
      // 根据条件分页搜索
      searchBy() {
        this.getTableData()
      },
      // 批量审核成功
      batchAuditSuccess() {
        for (let i = 0; i < this.multipleSelection.length; i++) {
          this.auditSuccess(this.multipleSelection[i])
        }
      },
      // 批量审核失败
      batchAuditErrorShow() {
        this.auditErrorVisible = true
        this.data = this.multipleSelection
        this.errorMessage = ''
      },
    },
  }
</script>

<style lang="scss" scoped>
  .company-box {
    width: 100%;
    padding: 20px;
    .search {
    }
    .data {
    }
  }
  .my-custom-result {
    width: 100px; /* 你可以设置你需要的大小 */
    height: 100px; /* 你可以设置你需要的大小 */
  }
</style>
